import dash
from dash import html

'''
方式一：
因为此外部html文件中echarts实例设定了宽度跟高度，
再加上该html中body节点默认的margin为8px，因此我们若想要保证插入的iframe没有滚动条，
需要给html.Iframe()计算好所需的满打满算的宽度与高度并关闭iframe默认的轮廓线（如第一个iframe）

方式二：
更通用的方式应当是修改html文件中对应宽度高度设置项并利用style标签关闭body默认的margin，这样无论你的iframe设置成多大都不会出现滚动条（如第二个iframe）
'''
app = dash.Dash(name='插入外部网页')

app.layout = html.Div(
    [
        html.Iframe(
            srcDoc=open('assets/liquid.html', encoding='utf-8').read(),
            style={
                'width': '916px',
                'height': '516px',
                'border': 'none'
            }
        ),
        html.Iframe(
            srcDoc=open('assets/liquid1.html', encoding='utf-8').read(),
            style={
                'width': '916px',
                'height': '516px',
                'border': 'none'
            }
        ),

    ]
)

if __name__ == '__main__':
    app.run(debug=True)
